<template>
	<view :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">提现记录</block>
		</cu-custom>
		<view class="show-list">
			<view class="item" v-for="(item,index) in showList" :key="index">
				<image :src="item.iconUrl"></image>
				<view class="info">
					<view>{{item.msg}}</view>
					<view>
						<view>
							<text>余额提现-{{item.withdraw_type_id==3?"到微信零钱":(item.withdraw_type_id==1?"到":"")}}{{item.bankName?item.bankName:""}}{{item.bankLitNum?"("+item.bankLitNum+")":""}}</text>
							<text>{{item.create_time}}</text>
						</view>
						<view class="text-price text-colorP">{{item.withdraw_money}}</view>
					</view>
					<view class="lose text-colorP" @click='showLayerNew' :data-title="'提现失败理由'" :data-info="item.pay_reason" v-if="item.msg=='提现申请失败'">详情</view>
				</view>
			</view>
			<tui-divider width="60%" :gradual="true">没有更多了</tui-divider>
			<no-content :showType="'data'" v-if='noContentShow'></no-content>
		</view>
		<view class="layer" v-if="isLayer">
			<view class="content">
				<view class="title1">
					{{layer.title}}
					<view class="del" @click='delItemNew'></view>
				</view>
				<view class="delItemNew">
					{{layer.info}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require('../utils/utilBank.js')
	import noContent from './component/noContent.vue'
	import tuiDivider from './component/divider.vue'
	export default {
		components: {
			noContent,
			tuiDivider
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
		},
		data() {
			return {
				showList: [],
				noContentShow: false,
				CustomBar: this.CustomBar + 10,
				layer:{},
				isLayer: false
			}
		},
		onLoad() {
			this.getInfo()
		},
		methods: {
			delItemNew() {
				this.isLayer = false
			},
			showLayerNew(e) {
				var layer = this.layer
				layer.info = e.currentTarget.dataset.info
				layer.title = e.currentTarget.dataset.title
				this.layer = layer
				this.isLayer = true
			},
			getInfo() {
				var that = this;
				this.$request({
					url: '/Consumer/getReceivedWithdrawListNew',
					success: res => {
						if (res.data.status == 1) {
							var thisData = res.data.data
							if (thisData.length == 0) {
								that.noContentShow = true
								return
							}
							var showList = that.showList
							thisData.forEach(item => {
								item.withdraw_money = Number(item.withdraw_money).toFixed(2)
								if (item.withdraw_type_id == 1) {
									var bankName = util.bankCardAttribution(item.card_number).bankName
									item['bankName'] = bankName
									item['bankLitNum'] = item.card_number.substr(item.card_number.length - 4)
								}
								// icon  成功或失败  失败理由
								if (item.status == 0) {
									item['iconUrl'] = 'http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/tixian-wait.png'
									item['msg'] = '提现处理中'
								} else if (item.status == 3) {
									item['iconUrl'] = 'http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/tixian-err.png'
									item['msg'] = '提现申请失败'
								} else if (item.status == 2) {
									if (item.pay_status == 'SUCCESS') {
										item['iconUrl'] = 'http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/tixian-suc.png'
										item['msg'] = '提现到账成功'
									} else if (item.pay_status == 'PROCESSING' || item.pay_status == '') {
										item['iconUrl'] = 'http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/tixian-wait.png'
										item['msg'] = '提现处理中'
									} else if (item.pay_status == 'FAILED') {
										item['iconUrl'] = 'http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/tixian-err.png'
										item['msg'] = '提现申请失败'
									}
								}
								showList.push(item)
							})
							that.showList = showList
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style scoped>
	page {
		background: #f8f8f8;
	}

	.container {
		width: 100%;
		box-sizing: border-box;
	}

	.show-list {
		width: 100%;
		box-sizing: border-box;
		padding: 0 24rpx;
	}

	.item {
		width: 100%;
		height: 175rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		display: flex;
		/* align-items: center; */
		padding: 20rpx;
		box-sizing: border-box;
	}

	.item image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 18rpx;

	}

	.info {
		flex: 1;
		position: relative;
	}

	.info .lose {
		position: absolute;
		right: 0;
		top: 0;
		height: 42rpx;
		line-height: 42rpx;
		font-size: 28rpx;
		text-align: center;
	}

	.info>view:nth-child(1) {
		font-size: 28rpx;
		line-height: 42rpx;
		padding-bottom: 10rpx;
		box-sizing: border-box;
		border-bottom: solid 1rpx #f2f2f2;
		color: #333333;
	}


	.info>view:nth-child(2) {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0;
		box-sizing: border-box;
	}

	.info>view:nth-child(2)>view:nth-child(1) {
		display: flex;
		flex-direction: column;
	}

	.info>view:nth-child(2)>view:nth-child(1)>text:nth-child(1) {
		color: #333333;
		font-size: 26rpx;
		display: inline-block;
		margin-bottom: 10rpx;
	}

	.info>view:nth-child(2)>view:nth-child(1)>text:nth-child(2) {
		color: #999999;
		font-size: 24rpx;
	}

	.info>view:nth-child(2)>view:nth-child(2) {
		color: #fd7023;
		font-size: 28rpx;
		font-weight: bold;
	}

	/* 浮层 */

	.layer {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.2);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.layer .content {
		width: 650rpx;
		height: 300rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}

	.layer .content .title1 {
		color: #333;
		width: 100%;
		font-size: 32rpx;
		text-align: center;
		margin: 25rpx 0;
		position: relative;
	}

	.layer .content>view:nth-child(2) {
		padding: 0 52rpx;
		box-sizing: border-box;
		text-align: center;
		color: #999;
		font-size: 30rpx;
	}

	.del {
		width: 40rpx;
		height: 40rpx;
		background-color: #ee494f;
		border-radius: 8rpx;
		color: #fff;
		line-height: 40rpx;
		text-align: center;
		position: absolute;
		right: -20rpx;
		top: -40rpx;
		background: url('https://sichuangyi.demopp.in/static/qchd/turnoff.svg');
	}
</style>
